<template>
  <div class="mt-[20px] mb-[50px] pr-[20px]">
    <el-form
      ref="ruleFormRef"
      :model="form"
      :rules="formRules"
      label-width="85px"
    >
      <el-form-item label="登录门店" prop="storeId">
        <el-select v-model="form.storeId" clearable placeholder="请选择">
          <el-option
            v-for="item in props.storeList"
            :key="item.id"
            :label="item.storeName"
            :value="item.id"
          />
        </el-select>
      </el-form-item>
    </el-form>
  </div>
</template>

<script setup>
import { ref, onMounted } from "vue";
import { useUserStoreHook } from "@/store/modules/user";
defineOptions({
  name: "ChooseStore"
});

const form = ref({});
const ruleFormRef = ref();
const formRules = {
  storeId: [{ required: true, message: "请选择门店", trigger: "change" }]
};

// 传值
const props = defineProps({
  storeList: {
    type: Array,
    default: () => []
  }
});

function getRef() {
  return ruleFormRef.value;
}

function getStoreId() {
  return form.value.storeId;
}

defineExpose({ getRef, getStoreId });

onMounted(() => {
  let loginStoreId = useUserStoreHook().loginStoreId;
  if (loginStoreId) {
    form.value.storeId = loginStoreId;
  }
});
</script>

<style lang="scss" scoped></style>
